<template>
	<view v-if="show" class="zan-noticebar" :class="{ 'zan-noticebar--within-icon': hasRightIcon }" :style="{ color: color, backgroundColor: backgroundColor, padding: paddingTop + 'px 10px' }">
		<view v-if="leftIcon" class="zan-noticebar__left-icon"><image class="image" :src="leftIcon" /></view>
		<view class="zan-noticebar__content-wrap">
			<view class="zan-noticebar__content" :animation="animationData">{{ text }}</view>
		</view>

		<block v-if="mode">
			<zan-icon v-if="mode === 'closeable'" class="zan-noticebar__right-icon" type="close" @tap="handleButtonClick" />
			<navigator v-if="mode === 'link'" :url="url" :open-type="openType"><zan-icon class="zan-noticebar__right-icon" type="arrow" /></navigator>
		</block>
	</view>
</template>

<script>
var VALID_MODE = ['closeable'];
var FONT_COLOR = '#f60';
var BG_COLOR = '#fff7cc';
export default {
	props: {
		text: {
			type: String,
			default: ''
		},
		mode: {
			type: String,
			default: ''
		},
		url: {
			type: String,
			default: ''
		},
		openType: {
			type: String,
			default: 'navigate'
		},
		delay: {
			type: Number,
			default: 0
		},
		speed: {
			type: Number,
			default: 40
		},
		scrollable: {
			type: Boolean,
			default: false
		},
		leftIcon: {
			type: String,
			default: ''
		},
		color: {
			type: String,
			default: FONT_COLOR
		},
		backgroundColor: {
			type: String,
			default: BG_COLOR
		},
		paddingTop: {
			type: String,
			default: '4'
		}
	},
	data() {
		return {
			show: true,
			hasRightIcon: false,
			width: undefined,
			wrapWidth: undefined,
			elapse: undefined,
			animation: null,
			animationData: '',
			resetAnimation: null,
			timer: null
		};
	},
	watch: {
		text(newVal, oldVal) {
			this.$nextTick(() => {
				this.init();
			});
		}
	},
	mounted() {
		let mode = this.mode;
		if (mode && this.checkMode(mode)) {
			this.hasRightIcon = true;
		}
		this.$nextTick(() => {
			this.init();
		});
	},
	methods: {
		checkMode(val) {
			let isValidMode = ~VALID_MODE.indexOf(val);
			if (!isValidMode) {
				console.warn('mode only accept value of ' + VALID_MODE + ', now get ' + val + '.');
			}
			return isValidMode;
		},
		init() {
			uni.createSelectorQuery()
				.in(this)
				.select('.zan-noticebar__content')
				.boundingClientRect(rect => {
					if (!rect || !rect.width) {
						return;
					}
					this.width = rect.width;
					uni.createSelectorQuery()
						.in(this)
						.select('.zan-noticebar__content-wrap')
						.boundingClientRect(rect => {
							if (!rect || !rect.width) {
								return;
							}

							let wrapWidth = rect.width;
							// var _data = _this.data,
							let width = this.width;
							let speed = this.speed;
							let scrollable = this.scrollable;
							let delay = this.delay;

							if (scrollable && wrapWidth < width) {
								let elapse = (width / speed) * 1000;
								let animation = uni.createAnimation({
									duration: elapse,
									timeingFunction: 'linear',
									delay: delay
								});
								let resetAnimation = uni.createAnimation({
									duration: 0,
									timeingFunction: 'linear'
								});
								this.elapse = elapse;
								this.wrapWidth = wrapWidth;
								this.animation = animation;
								this.resetAnimation = resetAnimation;
								this.$nextTick(() => {
									this.scroll();
								});
							}
						})
						.exec();
				})
				.exec();
		},
		scroll() {
			let animation = this.animation;
			let resetAnimation = this.resetAnimation;
			let wrapWidth = this.wrapWidth;
			let elapse = this.elapse;
			let speed = this.speed;

			resetAnimation.translateX(wrapWidth).step();
			let animationData = animation.translateX(-(elapse * speed) / 1000).step();
			this.animationData = resetAnimation.export();
			setTimeout(() => {
				this.animationData = animationData.export();
			}, 100);

			this.timer = setTimeout(() => {
				this.scroll();
			}, elapse);
		},
		handleButtonClick() {
			let timer = this.timer;
			timer && clearTimeout(timer);
			this.show = false;
			this.timer = null;
		}
	}
};
</script>

<style>
.zan-noticebar {
	display: -webkit-box;
	display: flex;
	/* padding: 4px 10px; */
	font-size: 26rpx;
	line-height: 1.5;
}

.zan-noticebar--within-icon {
	position: relative;
	padding-right: 60rpx;
}

.zan-noticebar__left-icon {
	height: 36rpx;
	min-width: 40rpx;
	padding-top: 1rpx;
	box-sizing: border-box;
}

.zan-noticebar__left-icon > .image {
	width: 32rpx;
	height: 32rpx;
}

.zan-noticebar__right-icon {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	font-size: 30rpx;
	line-height: 1;
}

.zan-noticebar__content-wrap {
	position: relative;
	-webkit-box-flex: 1;
	flex: 1;
	height: 36rpx;
	overflow: hidden;
}

.zan-noticebar__content {
	position: absolute;
	white-space: nowrap;
}
</style>
